Day 7 HTML初步架構(CSS分頁)

2023 iThome 鐵人賽

DAY 7

Modern Web

基礎網頁開發30天系列第 7 篇

15th鐵人賽

benny91917

2023-09-22 00:09:30

262 瀏覽

分享至

網頁設計中的CSS（層疊樣式表）是一種用於定義網頁外觀和版面設計的樣式語言。CSS與HTML和JavaScript一起用於網頁的前端開發，它負責控制網頁的外觀和視覺呈現方式。以下是有關CSS的一些重要信息：

層疊樣式表 (CSS) 的用途：

外觀設計： CSS用於指定網頁元素的外觀，包括文字、背景、邊框、大小和間距等。
版面設計：它用於控制網頁元素的位置和佈局，使您能夠創建多欄布局，調整元素的位置，並實現響應式設計。
動畫和過渡：您可以使用CSS創建動畫和過渡效果，使網頁元素具有互動性。
媒體查詢： CSS允許您根據設備屏幕的大小或其他特性來調整網頁的外觀，以實現響應式設計。

CSS的語法：

CSS使用選擇器（Selectors）來選擇HTML元素，然後使用屬性（Properties）和值（Values）來定義該元素的樣式。
例如，以下是一個CSS規則，將所有段落的文字顏色設置為藍色：

p {
    color: blue;
}

CSS樣式表的類型：

內部樣式表（Internal Stylesheet）： CSS代碼包含在HTML文件的<style>標籤內，位於<head>區域內。
外部樣式表（External Stylesheet）： CSS代碼存儲在獨立的.css文件中，然後通過<link>元素引入到HTML文件中，使多個網頁可以共享相同的樣式。
內聯樣式（Inline Styles）： CSS樣式直接添加到HTML元素的style屬性中，通常用於個別元素的特定樣式。

選擇器（Selectors）：

選擇器是用於選擇HTML元素的模式或規則，可以基於元素的標籤名稱、類別、ID、層次結構等來進行選擇。
常見的選擇器包括元素選擇器（如p）、類別選擇器（如.header）、ID選擇器（如#main-content）等。

屬性和值：

屬性是您希望更改的樣式特性，如文字顏色、背景色、邊框寬度等。
值是您希望將屬性設置為的具體值，如紅色、16像素、實線等。

CSS框模型：

CSS框模型描述了HTML元素如何佔用空間，包括內容、內邊距、邊框和外邊距。
這有助於設計元素的佈局和外觀。

CSS預處理器：

預處理器（如Sass和Less）是CSS的擴展，它們提供了變數、嵌套、混合、函數等功能，使CSS代碼更容易維護和擴展。

總的來說，CSS是網頁設計的關鍵組件之一，它負責網頁的外觀和版面設計，使網站能夠呈現吸引人的視覺效果並提供良好的用戶體驗。學習和掌握CSS對於成為一名優秀的網頁設計師至關重要。

            <main>
                <div>網頁設計中的CSS（層疊樣式表）是一種用於定義網頁外觀和版面設計的樣式語言。CSS與HTML和JavaScript一起用於網頁的前端開發，它負責控制網頁的外觀和視覺呈現方式。以下是有關CSS的一些重要信息：</div>
                <div>1.層疊樣式表 (CSS) 的用途：</div>
                <div>外觀設計： CSS用於指定網頁元素的外觀，包括文字、背景、邊框、大小和間距等。</div>
                <div>版面設計： 它用於控制網頁元素的位置和佈局，使您能夠創建多欄布局，調整元素的位置，並實現響應式設計。</div>
                <div>動畫和過渡： 您可以使用CSS創建動畫和過渡效果，使網頁元素具有互動性。</div>
                <div>媒體查詢： CSS允許您根據設備屏幕的大小或其他特性來調整網頁的外觀，以實現響應式設計。</div>
                <div>2.CSS的語法：</div>
                <div>CSS使用選擇器（Selectors）來選擇HTML元素，然後使用屬性（Properties）和值（Values）來定義該元素的樣式。</div>
                <div>3.CSS樣式表的類型：</div>
                <div>內部樣式表（Internal Stylesheet）： CSS代碼包含在HTML文件的<style>標籤內，位於<head>區域內。</div>
                <div>外部樣式表（External Stylesheet）： CSS代碼存儲在獨立的.css文件中，然後通過<link>元素引入到HTML文件中，使多個網頁可以共享相同的樣式。</div>
                <div>內聯樣式（Inline Styles）： CSS樣式直接添加到HTML元素的style屬性中，通常用於個別元素的特定樣式。</div>
                <div>4.選擇器（Selectors）：</div>
                <div>選擇器是用於選擇HTML元素的模式或規則，可以基於元素的標籤名稱、類別、ID、層次結構等來進行選擇。</div>
                <div>常見的選擇器包括元素選擇器（如p）、類別選擇器（如.header）、ID選擇器（如#main-content）等。</div>
                <div>5.屬性和值：</div>
                <div>屬性是您希望更改的樣式特性，如文字顏色、背景色、邊框寬度等。</div>
                <div>值是您希望將屬性設置為的具體值，如紅色、16像素、實線等。</div>
                <div>6.CSS框模型：</div>
                <div>CSS框模型描述了HTML元素如何佔用空間，包括內容、內邊距、邊框和外邊距。</div>
                <div>這有助於設計元素的佈局和外觀。</div>
                <div>7.CSS預處理器：</div>
                <div>預處理器（如Sass和Less）是CSS的擴展，它們提供了變數、嵌套、混合、函數等功能，使CSS代碼更容易維護和擴展。</div>
                <p></p>
                <div>總的來說，CSS是網頁設計的關鍵組件之一，它負責網頁的外觀和版面設計，使網站能夠呈現吸引人的視覺效果並提供良好的用戶體驗。学习和掌握CSS對於成為一名優秀的網頁設計師至關重要。</div>
            </main>

一樣使用<div>語法來增加文字描述

目前製作結果：